<template>
    <div class="body">
        <div class="mars"></div>
        <p class="title">Oh no!!</p>
        <p class="subtitle">
            页面未找到<br>要么请求一个不再在这里的页面。
        </p>
        <div align="center">
            <a class="btn-back" href="/">返回首页</a>
        </div>
    </div>
</template>

<style scoped>
    .body {
        width: 100%;
        height: 100vh;
        background-position: center;
    }
    .title {
        font-family: "Nunito", sans-serif;
        font-weight: 600;
        text-align: center;
        font-size: 5vmin;
        margin-top: 31vmin;
    }
    .subtitle {
        font-family: "Nunito", sans-serif;
        font-weight: 400;
        text-align: center;
        font-size: 3.5vmin;
        margin-top: 10vmin;
        margin-bottom: 9vmin;
    }
    .btn-back {
        border: 1px solid white;
        height: 5vmin;
        padding: 12px;
        font-family: "Nunito", sans-serif;
        text-decoration: none;
        border-radius: 5px;
    }
    .btn-back:hover {
        background: white;
        color: #4D007D;
    }
</style>